<template>
  <div class="topAlbum">
    <div class="wrapper">
      <span v-for=" ar in album"
            :key="ar.type"
            :class="{'isActive':index===ar.id}"
            @click="changeId(ar.id,ar.type)">{{ ar.value }}</span>
    </div>
    <div class="T-main">
      <p>本周新碟</p>
      <ul>
        <li v-for="al in TopAlbum"
            :key="al.id"
            @click="toPath (al.id)">
          <img v-lazy="al.blurPicUrl"
               alt="">
          <div class="icon-size">
            <svg class="icon"
                 aria-hidden="true">
              <use xlink:href="#icon-gf-play"></use>
            </svg>
          </div>
          <img src="@/assets/cipan.png"
               class="cipan">
          <span>{{ al.name }}</span>
          <span style="font-size:12px; color: #7a7575">{{ al.artist.name }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getTopAlbum } from '@/api/artist'
export default {
  data () {
    return {
      index: 0,
      TopAlbum: [],//新碟上架
      album: [{ type: ' ALL', value: '全部', id: 0 },
      { type: 'ZH', value: '华语', id: 7 },
      { type: 'EA', value: '欧美', id: 96 },
      { type: 'KR', value: '韩国', id: 52 },
      { type: 'JP', value: '日本', id: 42 },
      ],
      queryInfo: {
        limit: 30,
        offset: 0,
        area: 'ALL',
        type: 'new',
        month: '',
        year: ''
      },
    }
  },
  mounted () {
    this.getTopAlbum()
  },
  methods: {
    // 新碟上架
    async getTopAlbum () {
      let res = await getTopAlbum(this.queryInfo)
      if (res.code !== 200) return
      this.TopAlbum = res.weekData
    },
    changeId (id, type) {
      this.index = id
      this.queryInfo.area = type
    },
    toPath (id) {
      this.$router.push({ path: 'homeitem/:id', query: { id } })
    }
  },
  watch: {
    queryInfo: {
      deep: true,
      handler () {
        this.getTopAlbum()
        console.log(this.queryInfo)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.topAlbum {
  margin-left: 140px;
  .wrapper {
    display: flex;
    span {
      font-size: 14px;
      width: 40px;
      height: 30px;
      line-height: 30px;
      margin-right: 10px;
      color: #7a7575;
      cursor: pointer;
    }
    .isActive {
      transition: 0.1s;
      font-weight: 550;
      color: #333333;
    }
  }
  .T-main {
    margin-top: 20px;
    p {
      float: left;
      width: 40px;
      height: auto;
      font-size: 18px;
    }
    ul {
      width: 1100px;
      float: left;
      margin-left: 10px;
      li {
        float: left;
        cursor: pointer;
        margin-right: 40px;
        margin-bottom: 30px;
        position: relative;
        img {
          border-radius: 8px;
          width: 160px;
          height: 160px;
        }
        .icon-size {
          opacity: 0;
          position: absolute;
          top: 60px;
          left: 60px;
          width: 36px;
          height: 36px;
          border-radius: 18px;
          background-color: #fff;
          .icon {
            width: 20px;
            height: 20px;
            margin-left: 8px;
            margin-top: 8px;
          }
        }
        .cipan {
          position: absolute;
          top: 0;
          left: 25px;
          z-index: -1;
        }
        span {
          width: 140px;
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          white-space: nowrap; /*不换行强制文本在一行显示*/
          overflow: hidden; /*超出盒子宽度部分文字被隐藏*/
          text-overflow: ellipsis; /*当文本溢出包含元素时发生的事情 ellipsis*/
          display: block;
        }
      }
      li:hover .icon-size {
        transition: all 1s;
        opacity: 1;
      }
    }
  }
}
</style>